<template>
  <el-dialog :close-on-click-modal='false' v-drag :title="$t('添加')" :v-if="dialogVisible" append-to-body :visible.sync="dialogVisible" width="450px" @close='close'>
    <el-form ref="form" :model="record" label-width="150px" label-position="left" :rules="rules" style="margin:0 30px;" class="aggregatedRouteDialogForm">
      <el-form-item :label="$t('区域')" prop="area">
        <el-input v-emoji v-model="record.area" style="width:210px" ref="areaRe" size='small'></el-input>
      </el-form-item>
      <el-form-item :label="$t('类型')" prop="type">
        <el-radio-group v-model="record.type" size='small'>
          <el-radio label="nssa" class="nssa">nssa</el-radio>
          <el-radio label="stub" class="stub">stub</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="Totally nssa/stub" prop="no_summary">
        <el-radio-group v-model="record.no_summary" size='small'>
          <el-radio label="on" class="summaryOn">{{$t('开启')}}</el-radio>
          <el-radio label="off" class="summaryOff">{{$t('关闭')}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="$t('是否发布默认路由')" prop="default_originate">
        <el-radio-group v-model="record.default_originate" size='small'>
          <el-radio label="on" class="originateOn">{{$t('开启')}}</el-radio>
          <el-radio label="off" class="originateOff">{{$t('关闭')}}</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit" class="regionalAddSubmit">{{$t('确 定')}}</el-button>
      <el-button @click="close" class="regionalAddClose">{{$t('取 消')}}</el-button>
    </span>
  </el-dialog>
</template>
<script>
import {
  addOspfv3Regional // OSPFv3添加区域配置
} from '@/api/network/route/dynamicRoute/OSPFv3'
import { inputClass } from '@/utils/input-class.js'
export default {
  name: 'RegionalDialog',
  data () {
    var validateIp = (rule, value, callback) => {
      if (!String(value).trim()) {
        callback(new Error(this.$t('请输入IP地址')))
      } else if (this.isValidIP(value)) {
        callback()
      } else {
        callback(new Error(this.$t('请输入正确的IP地址')))
      }
    }
    return {
      dialogVisible: false,
      record: {
        id: '',
        area: '',
        type: 'nssa',
        no_summary: 'off',
        default_originate: 'off'
      },
      recordCopy: {
        id: '',
        area: '',
        type: 'nssa',
        no_summary: 'off',
        default_originate: 'off'
      },
      type: '',
      rules: {
        area: [{ required: false, validator: validateIp, trigger: 'blur' }]
      }
    }
  },
  methods: {
    init (type, id) {
      this.dialogVisible = true
      this.type = type
      this.record.id = id
      this.$nextTick(() => {
        const data = ['areaRe']
        inputClass(this.$refs, data)
      })
    },
    submit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let formData = JSON.parse(JSON.stringify(this.record))
          if (this.type === '编辑') {
            addOspfv3Regional(formData).then(res => {
              if (res.status === 0) {
                this.$messages.success(this.$t('执行成功'))
                this.$emit('addRegional', formData)
                this.close()
              }
            })
          } else {
            this.$emit('addRegional', formData)
            this.close()
          }
        }
      })
    },
    close () {
      this.type = ''
      this.dialogVisible = false
      this.record = Object.assign({}, this.recordCopy)
      this.$refs.form.resetFields()
    },
    isInteger (value) {
      return (!isNaN(value) && (parseInt(value).toString().length === String(Number(value)).length))
    },
    isValidIP (ip) {
      let reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
      return reg.test(ip)
    }
  }
}
</script>
<style lang="less" scoped>
.aggregatedRouteDialogForm {
  .el-switch {
    margin-left: 15px;
    /deep/ .el-switch__core {
      &::before {
        content: "关闭";
        color: #fff;
        position: absolute;
        // font-size: 14px;
        transform: scale(0.85);
        left: 20px;
      }
    }
    &.switch-is-actived {
      /deep/ .el-switch__core {
        &::before {
          content: "开启";
          left: 8px;
          transform: scale(0.85);
        }
      }
    }
  }
}
</style>
